<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-for="item in list" :key="">{{item.text}}</p>
        <!--key值的作用让原有的值就地复用 不会再删除一些元素 而不使用key的是会删除原有的位置再增加一个-->
    </div>
    <script>
        
        new Vue({
            el:'#app',
            data:{
                list:[
                    {text:'a',id:1},
                    {text:'b',id:2},
                    {text:'c',id:3},
                    {text:'d',id:4},
                    {text:'e',id:5}
                ]
            } ,
            mounted(){
                setTimeout(() => {
                    this.list.splice(2, 0, {text:'f', id:6})
                    //splice(插入的位置，删除的位置{增加的内容})
                }, 2000);
            }
        })
    </script>
</body>
</html>